import React, { useState } from 'react';
import { YuqueEditor } from '../YuqueEditor';
import { YuqueViewer } from '../YuqueViewer';
import { EditOutlined, EyeOutlined } from '@ant-design/icons';
import './style.css';

export interface YuqueToggleProps {
  className?: string;
  style?: React.CSSProperties;
  defaultValue?: string;
  onChange?: (content: string) => void;
}

export function YuqueToggle({
  className = '',
  style = {},
  defaultValue,
  onChange
}: YuqueToggleProps) {
  const [isEditing, setIsEditing] = useState(true);
  const [content, setContent] = useState(defaultValue);

  const handleContentChange = (newContent: string) => {
    setContent(newContent);
    onChange?.(newContent);
  };

  return (
    <div className={`yuque-toggle ${className}`} style={{ ...style }}>
      <div className="yuque-toggle-header">
        <button
          className="yuque-toggle-button"
          onClick={() => setIsEditing(!isEditing)}
          title={isEditing ? '切换到预览模式' : '切换到编辑模式'}
        >
          {isEditing ? <EyeOutlined /> : <EditOutlined />}
          <span>{isEditing ? '预览' : '编辑'}</span>
        </button>
      </div>
      <div className="yuque-toggle-content">
        {isEditing ? (
          <YuqueEditor
            defaultValue={content}
            onChange={handleContentChange}
            style={{ height: '100%' }}
          />
        ) : (
          <YuqueViewer
            content={content}
            style={{ height: '100%' }}
          />
        )}
      </div>
    </div>
  );
} 